<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<title>商品</title>
<link rel="stylesheet" type="text/css" href="css/aui.css">
<link rel="stylesheet" href="css/classify.css">
<style>
	html,body{height: 100%;max-width: 640px;margin:0 auto;}
	.aui-bar-nav{border:none;background: #f5f5f5;}
	.main{height: calc(100% - 4.5rem);}
	
	#tab1-con1{padding-bottom: 3rem;}
	#tab1-con1,#tab1-con2{height: 100%;}
	.aui-tab{border-bottom: solid 1px #eee;background: #f5f5f5;height: 2.25rem;}
	.aui-tab-item{font-size: .75rem;color: #666;width: 25%;}
	.aui-tab-item.aui-active{border:none;color: #000;position: relative;}
	.aui-tab-item.aui-active:after{position: absolute;left: 40%;width: 20%;height: 2px;background: #00ae66;content: '';bottom:0;}
</style>
</head>
<body>
    <header class="aui-bar aui-bar-nav">
        <!-- <a class="aui-pull-left aui-btn">
            <span class="aui-iconfont aui-icon-left"></span>
        </a> -->
        <div class="aui-title">新鲜今日油条</div>
        <div class="aui-pull-right"></div>
    </header>
	<div class="aui-tab" id="tab">
	    <div class="aui-tab-item aui-active">点菜</div>
	    <!-- <div class="aui-tab-item">商家</div> -->
	</div>
	<div class="main">
		<div class="aui-item" id="tab1-con1">
			<div class="left-menu" id="left">
				<ul>
					<li><span>茴香味</span></li>
					<li><span>传统油条</span></li>
				</ul>
			</div>
			<div class="con">
				<div class="right-con con-active" style="display: none;">
					<ul>
						<li>
							<div class="menu-img"><img src="image/img.jpg"></div>
							<div class="menu-txt">
								<h4 data-icon="00">茴香大油条</h4>
								<p class="list1">单位：根</p>
								<p class="list2">
									<b>￥</b><b>2.50</b>
								</p>
								<div class="btn">
									<button class="minus"></button>
									<i>0</i>
									<button class="add"></button>
									<i class="price">2.50</i>
								</div>
							</div>
						</li>
						<li>
							<div class="menu-img"><img src="image/img.jpg"></div>
							<div class="menu-txt">
								<h4 data-icon="01">茴香小油条</h4>
								<p class="list1">单位：根</p>
								<p class="list2">
									<b>￥</b><b>1.50</b>
								</p>
								<div class="btn">
									<button class="minus"></button>
									<i>0</i>
									<button class="add"></button>
									<i class="price">1.50</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="right-con" style="display: none;">
					<ul>
						<li>
							<div class="menu-img"><img src="image/img.jpg"></div>
							<div class="menu-txt">
								<h4 data-icon="10">传统大油条</h4>
								<p class="list1">单位：根</p>
								<p class="list2">
									<b>￥</b><b>2.00</b>
								</p>
								<div class="btn">
									<button class="minus"></button>
									<i>0</i>
									<button class="add"></button>
									<i class="price">2.00</i>
								</div>
							</div>
						</li>
						<li>
							<div class="menu-img"><img src="image/img.jpg"></div>
							<div class="menu-txt">
								<h4 data-icon="11">传统小油条</h4>
								<p class="list1">单位：根</p>
								<p class="list2">
									<b>￥</b><b>1.00</b>
								</p>
								<div class="btn">
									<button class="minus"></button>
									<i>0</i>
									<button class="add"></button>
									<i class="price">1.00</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="up1"></div>
			<div class="shopcart-list fold-transition">
				<div class="list-header">
					<h1 class="title">购物车</h1>
					<span class="empty">清空所有</span>
				</div>
				<div class="list-content">
					<ul></ul>
				</div>
			</div>
			<div class="footer">
				<div class="left">
					<div class="count_num"><span id="totalcountshow">0</span></div>
					<span id="cartN" class="nowrap">总计：<span id="totalpriceshow">0</span>元</span> 
				</div>
				<div class="right">
					<a id="btnselect" class="xhlbtn disable">支付宝付款</a>
				</div>
			</div>
		</div>
	    <div class="aui-item aui-hide" id="tab1-con2">
	        2
	    </div>
	</div>


<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="script/add.js"></script>
<script type="text/javascript" src="script/aui-tab.js" ></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
    }
    var tab = new auiTab({
        element: document.getElementById("tab"),

    }, function(ret) {
        if (ret) {
            //定义获取对象的所有兄弟节点的函数，
            function siblings(elm) {
                var a = [];
                var p = elm.parentNode.children;
                for (var i = 0, pl = p.length; i < pl; i++) {
                    if (p[i] !== elm) a.push(p[i]);
                }
                return a;
            }
            var index = ret.index;
            var activeC = document.getElementById("tab1-con" + index);
            activeC.className = "";
            for (var i = 0; i < siblings(activeC).length; i++) {
                siblings(activeC)[i].className = "aui-hide";
            }
        }
    });
</script>
</body>
</html>
